<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品类别排序</title>

    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>

    <!--sort样式-->
    <style>
        body{
            font-size: 12px;
            font-family: Arial;
        }
        div.categoryPageDiv{
            max-width: 1013px;
            margin: 10px auto;
        }
        div.categoryPageDiv div.categorySortBar{
            background: #FAF9F9;
            margin: 40px 20px 20px 20px;
            padding: 4px;
        }
        table{
            display: inline-block;
            border-collapse: collapse;
        }
        table.categorySortBarTable span.glyphicon{
            font-size: 10px;
        }
        table.categorySortBarTable td{
            border: 1px solid #CCCCCC;
            height: 17px;
            font-size: 12px;
            padding: 3px;
        }
        table.categorySortBarTable td.grayColumn{
            background-color: #F1EDEC;
        }
        table.categorySortBarTable a{
            color: #806F66;
        }
        table.categorySortBarTable a:hover{
            text-decoration: none;
            color: #C40000;
        }
        table.categorySortBarTable td:hover{
            background-color: #F1EDEC;
        }
        table.categorySortBarTable input{
            border-width: 0px;
            width: 50px;
            height: 17px;
        }
        table.categorySortBarTable td.priceMiddleColumn{
            vertical-align: middle;
            width: 5px;
            color: #CCCCCC;
        }
    </style>
    <!--产品列表样式-->
    <style>
        div.categoryProducts{
            padding: 0px 20px 40px 20px;
        }
        div.productUnit{
            width: 225px;
            height: 338px;
            border: 3px solid white;
            background-color: white;
            margin: 12px 5px;
            float: left;
            /*display: inline-block;*/
        }
        div.productUnit:hover{
            border: 3px solid #C40000;
        }
        div.productUnitFrame{
            border: 1px solid #eee;
            height: 100%;
        }
        div.productUnitFrame:hover{
            border: 1px solid #C40000;
        }
        div.productUnit img.productImage{
            width: 100%;
            height: 190px;
        }
        div.productUnit span.productPrice{
            font-size: 20px;
            color: #CC0000;
            display: block;
            padding-left: 4px;
        }
        div.productUnit a.productLink{
            color: #333333;
            margin: 10px 0px;
            display: block;
            height: 34px;
        }
        div.productUnit a.productLink:hover{
            color: #C40000;
            text-decoration: underline;
        }
        div.productUnit a.tmallLink{
            margin: 10px 0px;
            color: #999999;
            display: block;
            text-decoration: underline;
        }
        div.productUnit a.tmallLink:hover{
            color: #C40000;
            text-decoration: underline;
        }
        /*成交，评价，旺旺所在的div*/
        div.productUnit div.productInfo{
            border-top: 1px solid #EEEEEE;
            color: #999999;
        }
        /*月成交字样所在的span*/
        div.productUnit span.productDealNumber{
            font-weight: bold;
            color: #B57C5B;
        }
        /*评价字样所在的span*/
        div.productUnit span.productReview{
            border-left: 1px solid #EEEEEE;
            border-right: 1px solid #EEEEEE;
        }
        div.productUnit span.productReviewNumber{
            font-weight: bold;
            color: #3388BB;
        }
        div.productUnit span.monthDeal, div.productUnit span.productReview{
            display: inline-block;
            width: 90px;
            height: 29px;
            padding-top: 5px;
            padding-left: 5px;
        }
        div.productUnit span.wangwang{
            padding-left: 3px;
        }
    </style>
</head>
<body>
    <div class="categoryPageDiv">
        <img src="http://how2j.cn/tmall/img/category/72.jpg">
        <div class="categorySortBar">
            <table class="categorySortBarTable categorySortTable">
                <tbody>
                    <tr>
                        <td class="grayColumn"><a href="#nowhere">综合<span class="glyphicon glyphicon-arrow-down"></span></a></td>
                        <td><a href="#nowhere">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td>
                        <td><a href="#nowhere">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td>
                        <td><a href="#nowhere">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td>
                        <td><a href="#nowhere">价格<span class="glyphicon glyphicon-resize-vertical"></span></a></td>
                    </tr>
                </tbody>
            </table>
            <table class="categorySortBarTable">
                <tbody>
                    <tr>
                        <td><input type="text" placeholder="请输入" class="sortBarPrice beginPrice"></td>
                        <td class="grayColumn priceMiddleColumn">-</td>
                        <td><input type="text" placeholder="请输入" class="sortBarPrice endPrice"></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="categoryProducts">
            <div price="799.2" class="productUnit">
                <div class="productUnitFrame">
                    <a href="#nowhere"><img src="http://how2j.cn/tmall/img/productSingle_middle/7058.jpg" class="productImage"></a>
                    <span class="productPrice">¥799.20</span>
                    <a href="#nowhere" class="productLink">MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮</a>
                    <a href="#nowhere" class="tmallLink">天猫专卖</a>
                    <div class="show1 productInfo">
                        <span class="monthDeal">
                            月成交 <span class="productDealNumber">16笔</span>
                        </span>
                        <span class="productReview">
                            评价 <span class="productReviewNumber">14</span>
                        </span>
                        <span class="wangwang">
                            <a href="#nowhere" class="wangwanglink"><img src="http://how2j.cn/tmall/img/site/wangwang.png"></a>
                        </span>
                    </div>
                </div>
            </div>
            <div price="511.2" class="productUnit">
                <div class="productUnitFrame">
                    <a href="#nowhere">
                        <img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/7047.jpg" class="productImage">
                    </a>
                    <span class="productPrice">¥511.20</span>
                    <a href="#nowhere" class="productLink">
                        宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包
                    </a>
                    <a href="#nowhere" class="tmallLink">天猫专卖</a>
                    <div class="show1 productInfo">
                        <span class="monthDeal ">月成交 <span class="productDealNumber">49笔</span></span>
                        <span class="productReview">评价<span class="productReviewNumber">18</span></span>
                        <span class="wangwang">
                    <a href="#nowhere" class="wangwanglink">
                        <img src="http://how2j.cn/tmall/img/site/wangwang.png">
                    </a>
                    </span>
                    </div>
                </div>
            </div>
            <div price="448.2" class="productUnit">
                <div class="productUnitFrame">
                    <a href="#nowhere">
                        <img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/7036.jpg" class="productImage">
                    </a>
                    <span class="productPrice">¥448.20</span>
                    <a href="#nowhere" class="productLink">
                        唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮
                    </a>
                    <a href="#nowhere" class="tmallLink">天猫专卖</a>
                    <div class="show1 productInfo">
                        <span class="monthDeal ">月成交 <span class="productDealNumber">34笔</span></span>
                        <span class="productReview">评价<span class="productReviewNumber">16</span></span>
                        <span class="wangwang">
                    <a href="#nowhere" class="wangwanglink">
                        <img src="http://how2j.cn/tmall/img/site/wangwang.png">
                    </a>
                    </span>
                    </div>
                </div>
            </div>
            <div price="411.6" class="productUnit">
                <div class="productUnitFrame">
                    <a href="#nowhere">
                        <img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/7025.jpg" class="productImage">
                    </a>
                    <span class="productPrice">¥411.60</span>
                    <a href="#nowhere" class="productLink">
                        英伦邦纹男士手包牛皮大容量真皮手拿包手抓包双拉链商务正品软皮
                    </a>
                    <a href="#nowhere" class="tmallLink">天猫专卖</a>
                    <div class="show1 productInfo">
                        <span class="monthDeal ">月成交 <span class="productDealNumber">25笔</span></span>
                        <span class="productReview">评价<span class="productReviewNumber">19</span></span>
                        <span class="wangwang">
                    <a href="#nowhere" class="wangwanglink">
                        <img src="http://how2j.cn/tmall/img/site/wangwang.png">
                    </a>
                    </span>
                    </div>
                </div>
            </div>
            <div price="157.25" class="productUnit">
                <div class="productUnitFrame">
                    <a href="#nowhere">
                        <img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/7014.jpg" class="productImage">
                    </a>
                    <span class="productPrice">¥157.25</span>
                    <a href="#nowhere" class="productLink">
                        劳迪莱斯男士手包休闲手拿包牛皮大容量钱包男包软面小包包手抓包
                    </a>
                    <a href="#nowhere" class="tmallLink">天猫专卖</a>
                    <div class="show1 productInfo">
                        <span class="monthDeal ">月成交 <span class="productDealNumber">17笔</span></span>
                        <span class="productReview">评价<span class="productReviewNumber">16</span></span>
                        <span class="wangwang">
                    <a href="#nowhere" class="wangwanglink">
                        <img src="http://how2j.cn/tmall/img/site/wangwang.png">
                    </a>
                    </span>
                    </div>
                </div>
            </div>
            <div price="268.2" class="productUnit">
                <div class="productUnitFrame">
                    <a href="#nowhere">
                        <img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/7003.jpg" class="productImage">
                    </a>
                    <span class="productPrice">¥268.20</span>
                    <a href="#nowhere" class="productLink">
                        帕朗尼男士手拿包真皮手包商务休闲头层牛皮软牛皮大容量休闲钱包
                    </a>
                    <a href="#nowhere" class="tmallLink">天猫专卖</a>
                    <div class="show1 productInfo">
                        <span class="monthDeal ">月成交 <span class="productDealNumber">5笔</span></span>
                        <span class="productReview">评价<span class="productReviewNumber">19</span></span>
                        <span class="wangwang">
                    <a href="#nowhere" class="wangwanglink">
                        <img src="http://how2j.cn/tmall/img/site/wangwang.png">
                    </a>
                    </span>
                    </div>
                </div>
            </div>
            <div price="233.4" class="productUnit">
                <div class="productUnitFrame">
                    <a href="#nowhere">
                        <img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/6992.jpg" class="productImage">
                    </a>
                    <span class="productPrice">¥233.40</span>
                    <a href="#nowhere" class="productLink">
                        编织手包手拿包男信封大容量手抓包真皮韩版潮商务休闲牛皮男包
                    </a>
                    <a href="#nowhere" class="tmallLink">天猫专卖</a>
                    <div class="show1 productInfo">
                        <span class="monthDeal ">月成交 <span class="productDealNumber">8笔</span></span>
                        <span class="productReview">评价<span class="productReviewNumber">19</span></span>
                        <span class="wangwang">
                    <a href="#nowhere" class="wangwanglink">
                        <img src="http://how2j.cn/tmall/img/site/wangwang.png">
                    </a>
                    </span>
                    </div>
                </div>
            </div>
            <div price="952.0" class="productUnit">
                <div class="productUnitFrame">
                    <a href="#nowhere">
                        <img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/6981.jpg" class="productImage">
                    </a>
                    <span class="productPrice">¥952.00</span>
                    <a href="#nowhere" class="productLink">
                        犟牛男士手包真皮手拿包头层牛皮商务大容量手抓包软皮夹包信封包
                    </a>
                    <a href="#nowhere" class="tmallLink">天猫专卖</a>
                    <div class="show1 productInfo">
                        <span class="monthDeal ">月成交 <span class="productDealNumber">20笔</span></span>
                        <span class="productReview">评价<span class="productReviewNumber">16</span></span>
                        <span class="wangwang">
                    <a href="#nowhere" class="wangwanglink">
                        <img src="http://how2j.cn/tmall/img/site/wangwang.png">
                    </a>
                    </span>
                    </div>
                </div>
            </div>
            <div style="clear:both"></div>
        </div>
    </div>
</body>

<script>
    $(function () {
        $("input.sortBarPrice").keyup(function () {
            var price = $(this).val();
            if(price.length == 0){
                $("div.productUnit").show();
                return;
            }
            price = parseInt(price);
            if(isNaN(price) || price <= 0){
                price = 1;
            }
            $(this).val(price);

            var begin = $("input.beginPrice").val();
            var end = $("input.endPrice").val();
            if(!isNaN(begin) && !isNaN(end)){
                begin = Number(begin);
                end = Number(end);
                $("div.productUnit").hide();
                $("div.productUnit").each(function () {
                    var num = $(this).attr("price");
                    if(num >= begin && num <= end){
                        $(this).show();
                    }
                });
            }
        });
    });
</script>
</html>